import React, { useState, useEffect, useRef } from 'react';
import join from './join';
import { Modal } from 'antd';
import './index.css';
import { Route, NavLink, HashRouter } from 'react-router-dom';
import Typed from 'typed.js';
let count = Number(localStorage.getItem('count'));
function App() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    localStorage.setItem('count', String(count + 1));
  }, []);
  console.log(localStorage.getItem('count'));
  function siteTime() {
    window.setTimeout('siteTime()', 1000);
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var today = new Date();
    var startYear = '2022';
    var startMonth = '11';
    var startDate = '30';
    var startHour = '0';
    var startMinute = '0';
    var startSecond = '0';
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth() + 1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    var t1 = Date.UTC(
      startYear,
      startMonth,
      startDate,
      startHour,
      startMinute,
      startSecond,
    );
    var t2 = Date.UTC(
      todayYear,
      todayMonth,
      todayDate,
      todayHour,
      todayMinute,
      todaySecond,
    );
    var diff = t2 - t1;
    var diffYears = Math.floor(diff / years);
    var diffDays = Math.floor(diff / days - diffYears * 365);
    var diffHours = Math.floor(
      (diff - (diffYears * 365 + diffDays) * days) / hours,
    );
    var diffMinutes = Math.floor(
      (diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
        minutes,
    );
    var diffSeconds = Math.floor(
      (diff -
        (diffYears * 365 + diffDays) * days -
        diffHours * hours -
        diffMinutes * minutes) /
        seconds,
    );
    if (startYear == todayYear) {
      // document.getElementById("year").innerHTML = todayYear;
      document.getElementById('sitetime').innerHTML =
        '本站已运行 ' +
        diffDays +
        ' 天 ' +
        diffHours +
        ' 小时 ' +
        diffMinutes +
        ' 分钟 ' +
        diffSeconds +
        ' 秒';
    } else {
      // document.getElementById("year").innerHTML = startYear + " - " + todayYear;
      document.getElementById('sitetime').innerHTML =
        '本站已运行 ' +
        diffYears +
        ' 年 ' +
        diffDays +
        ' 天 ' +
        diffHours +
        ' 小时 ' +
        diffMinutes +
        ' 分钟 ' +
        diffSeconds +
        ' 秒';
    }
  }
  setInterval(siteTime, 1000);
  const el = useRef(null);
  useEffect(() => {
    var typed = new Typed(el?.current, {
      strings: ['自律即自由!', '欢迎加入改变世界!'],
      startDelay: 300,
      typeSpeed: 100,
      loop: true,
      backSpeed: 70,
      showCursor: true,
    });

    // Destroying
    return () => {
      typed.destroy();
    };
  }, []);
  return (
    <main>
      <div className="site-title" id="site-title">
        <div className="site-background">
          <h3>你好</h3>
          <h1>
            <span ref={el}></span>{' '}
          </h1>
          <span id="typed"></span>
          <button
            className="btn"
            onClick={() => {
              setShow(true);
            }}
          >
            加入
          </button>
        </div>
      </div>
      <Modal
        title="招聘信息"
        open={show}
        footer={null}
        onCancel={() => {
          setShow(false);
        }}
      >
        {show && join()}
      </Modal>

      <div className="container" id="container">
        <div className="t-flx clearfix">
          <div className="label-box">
            <h2>业务架构</h2>
          </div>
        </div>
        <div className="blog">
          <div className="owl-carousel owl-theme blog-post ">
            <div className="blog-content">
              <img src="./assets/rgzn.jpg" />
              <div className="blog-title">
                <h3>人工智能</h3>
              </div>
            </div>
            <div className="blog-content">
              <img src="./assets/xnyx.jpg" />
              <div className="blog-title">
                <h3>虚拟游戏</h3>
              </div>
            </div>
            <div className="blog-content">
              <img src="./assets/jykx.jpg" />
              <div className="blog-title">
                <h3>基因科学</h3>
              </div>
            </div>
            <div className="blog-content">
              <img src="./assets/nmcl.jpg" />
              <div className="blog-title">
                <h3>纳米材料</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="brand-item white-bg tuanduiguanli pc-tab-brand mobile-tab-brand"
        id="about-con-5"
      >
        <div className="mod-con clearfix">
          <div className="t-flx clearfix">
            <div className="label-box">
              <h2>管理团队</h2>
            </div>
          </div>
          <div className="team-box clearfix">
            <div className="li li-1" t-name="姚文龙">
              <div className="mess">
                <p className="label">姚文龙</p>
                <div className="job-mess">
                  <p>主要创办人</p>
                  <p>董事会主席兼首席执行官</p>
                </div>
              </div>
              <div className="pic">
                <img src="./assets/ywl.jpg" alt="img" />
                <i className="block"></i>
              </div>
            </div>
            <div className="li li-2" t-name="姚嘉航">
              <div className="mess">
                <p className="label">姚嘉航</p>
                <div className="job-mess">
                  <p>董事会执行董事兼公司总经理</p>
                </div>
              </div>
              <div className="pic">
                <img src="./assets/yjh.jpg" alt="img" />
                <i className="block"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="brand-item pc-tab-brand mobile-tab-brand"
        id="about-con-6"
        style={{ marginTop: '30px' }}
      >
        <div className="mod-max-con clearfix culture-wrap">
          <div className="culture-box clearfix">
            <div className="t-box">
              <div className="pic">
                <img className="pc-box" src="./assets/bg.jpg" alt="img" />
              </div>
              <div className="mess-box">
                <div className="t-flx clearfix">
                  <div className="label-box">
                    <h3>企业文化</h3>
                  </div>
                  <div className="b-box">
                    <h4 className="item-title">价值观</h4>
                    <div className="boxx">
                      <div className="x-item">
                        <h5>正直</h5>
                        <p className="p">坚守底线，以德为先</p>
                      </div>
                      <div className="x-item">
                        <h5>进取</h5>
                        <p className="p">敢于担当，勇于突破</p>
                      </div>
                      <div className="x-item">
                        <h5>协作</h5>
                        <p className="p">开放协同，持续进化</p>
                      </div>
                      <div className="x-item">
                        <h5>创造</h5>
                        <p className="p">超越创新，探索未来</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="wrap_footer">
        <div className="footer_con">
          <div className="focus_us">
            <ul className="focus_list">
              <li>
                <a href="#" className="wechat-btn">
                  <i className="icon i_wechat"></i>
                  <img
                    className="wechat-code"
                    src="/img/index/wechat-code.jpg"
                    alt="img"
                  />
                </a>
              </li>
              <li>
                <a href="https://weibo.com/tencent" target="_blank">
                  <i className="icon i_weibo"></i>
                </a>
              </li>
              <li>
                <a href="https://twitter.com/TencentGlobal" target="_blank">
                  <i className="icon i_twitter"></i>
                </a>
              </li>
              <li>
                <a
                  href="https://www.linkedin.com/company/tencent/"
                  target="_blank"
                >
                  <i className="icon i_in"></i>
                </a>
              </li>
            </ul>
          </div>
          <div className="logo_tencent"></div>

          <div className="footer_area">
            <ul className="links">
              <li className="num">
                <a target="_blank" href="http://beian.miit.gov.cn/">
                  浙ICP备2022037484号-1
                </a>
              </li>
              <li className="num">
                <a
                  target="_blank"
                  href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002016889"
                >
                  <img
                    src="./assets/备案图标.png"
                    alt="img"
                    style={{ width: 20, height: 20 }}
                  />
                  浙公网安备 33011002016889号
                </a>
              </li>
              <li className="num">
                <a>执念公司 版权所有</a>
              </li>
              <li>
                <span id="busuanzi_container_site_pv">
                  &nbsp;<i className="far fa-eye"></i>&nbsp;总访问量:&nbsp;
                  <span id="busuanzi_value_site_pv" className="white-color">
                    {count}
                  </span>
                  &nbsp;次
                </span>
              </li>
              <li className="num">
                <span id="sitetime">载入运行时间...</span>
              </li>
            </ul>
          </div>

          <a className="ten_totop ten_totop--float back_to_top"></a>
        </div>
      </div>
    </main>
  );
}

export default App;
